<template>
    <view class="page">
        <!-- 用户信息区域 -->
        <view class="user-info" @click="navigateTo('/pages/user/userInfo')">
            <view class="avatar-box">
                <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
            </view>
            <view class="info">
                <text class="nickname">小明同学</text>
                <text class="vip">黄金会员 ></text>
            </view>
        </view>

        <!-- 订单状态 -->
        <view class="order-status">
            <view class="status-item" v-for="item in orderStatus" :key="item.text" @click="navigateTo(item.url)">
                <uni-icons :type="item.icon" :color="item.color" size="24"></uni-icons>
                <text class="status-text">{{ item.text }}</text>
                <text v-if="item.badge" class="badge">{{ item.badge }}</text>
            </view>
        </view>

        <!-- 功能列表 -->
        <uni-list>
            <uni-list-item v-for="item in functionList" :key="item.title" :title="item.title" :show-extra-icon="true"
                :extra-icon="item.icon" @click="navigateTo(item.url)" />
        </uni-list>

        <!-- 退出登录 -->
        <view class="logout">
            <button class="logout-btn" @click="handleLogout">退出登录</button>
        </view>
        <tab-bar :current-index="3" />
    </view>
</template>

<script>
    import tabBar from '@/components/tabBar.vue';
    export default {
        components: {
            tabBar
        },
        data() {
            return {
                orderStatus: [{
                        icon: 'wallet',
                        text: '待付款',
                        color: '#ff5500',
                        badge: 2,
                        url: '/pages/order/list?type=1'
                    },
                    {
                        icon: 'gift',
                        text: '待发货',
                        color: '#ffaa00',
                        url: '/pages/order/list?type=2'
                    },
                    {
                        icon: 'paperplane',
                        text: '待收货',
                        color: '#00aa7f',
                        url: '/pages/order/list?type=3'
                    },
                    {
                        icon: 'chat',
                        text: '售后',
                        color: '#007aff',
                        url: '/pages/order/after-sale'
                    }
                ],
                functionList: [{
                        title: '我的订单',
                        icon: {
                            color: '#007aff',
                            size: '22',
                            type: 'shop'
                        },
                        url: '/pages/order/list'
                    },
                    {
                        title: '我的收藏',
                        icon: {
                            color: '#ff5500',
                            size: '22',
                            type: 'heart'
                        },
                        url: '/pages/user/favorite'
                    },
                    {
                        title: '收货地址',
                        icon: {
                            color: '#00aa7f',
                            size: '22',
                            type: 'location'
                        },
                        url: '/pages/user/address'
                    },
                    {
                        title: '系统设置',
                        icon: {
                            color: '#666',
                            size: '22',
                            type: 'gear'
                        },
                        url: '/pages/settings/index'
                    }
                ]
            }
        },
        methods: {
            navigateTo(url) {
                uni.navigateTo({
                    url
                })
            },
            handleLogout() {
                uni.showModal({
                    title: '提示',
                    content: '确定要退出登录吗？',
                    success: (res) => {
                        if (res.confirm) {
                            // 执行退出登录操作
                            uni.showToast({
                                title: '退出成功',
                                icon: 'success'
                            })
                        }
                    }
                })
            }
        },
        onShow: () => {
            isLogin()
        }
    }
</script>

<style lang="scss" scoped>
    .page {
        background-color: #f5f5f5;
        min-height: calc(100vh - 100rpx);
        padding: 0 0 100rpx 0;
    }

    .user-info {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;

        .avatar-box {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 30rpx;

            .avatar {
                width: 100%;
                height: 100%;
            }
        }

        .info {
            display: flex;
            flex-direction: column;

            .nickname {
                font-size: 36rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
            }

            .vip {
                font-size: 24rpx;
                color: #ffaa00;
            }
        }
    }

    .order-status {
        display: flex;
        background-color: #fff;
        padding: 30rpx 0;
        margin-bottom: 20rpx;

        .status-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;

            .status-text {
                font-size: 24rpx;
                color: #666;
                margin-top: 10rpx;
            }

            .badge {
                position: absolute;
                top: -10rpx;
                right: 30rpx;
                background-color: #ff0000;
                color: #fff;
                padding: 0 10rpx;
                border-radius: 20rpx;
                font-size: 20rpx;
            }
        }
    }

    .logout {
        padding: 40rpx 30rpx;

        .logout-btn {
            background-color: #fff;
            color: #ff5500;
            border-radius: 50rpx;
            font-size: 32rpx;
        }
    }
</style>